<template>
  <!-- 充值轮盘 -->
  <el-dialog :visible.sync="isShow" v-if="isShow" title="充值轮盘" width="60%" :before-close="handleClose" top="50px" :close-on-click-modal="false">
    <div class="border-box">
      <page-details ref="baseForm" :data="data"/>
      <el-form ref="activityForm" :model="formParams" :rules="ruleForm" label-position="right" label-width="0">
        <div class="flex item-box" v-for="(item,index) in itemData" :key="index">
          <div class="title width25">
            {{ item.label }}
          </div>
          <div class="content width80">
            <!-- 基础配置 -->
            <div class="item-clear" v-show="item.key=='basics'" style="height:auto;">
              <div class="title flex">
                <span class="width15">奖池下限</span>
                <el-form-item class="item-clear" label="" >
                  <el-input-number :min="0" :max="999999999999" :precision="0" v-model="formParams.other.pool_down_limit" controls-position="right" clearable placeholder="请输入奖池保底金额"/>
                </el-form-item>
              </div>
              <div class="title flex">
                <span class="width15">奖池保底金额<span class="mustPass">*</span></span>
                <el-form-item class="item-clear" label="" >
                  <el-input-number :min="0" :max="999999999999" :precision="0" v-model="formParams.other.pool" controls-position="right" clearable placeholder="请输入奖池保底金额"/>
                </el-form-item>
              </div>
              <div class="title flex">
                <span class="width15">次数要求充值<span class="mustPass">*</span></span>
                <el-form-item class="item-clear" label="">
                  <el-input-number :min="0" :max="999999999999" :precision="0" v-model="formParams.other.time_per_recharge" controls-position="right" clearable placeholder="请输入抽奖次数"/>
                </el-form-item>
              </div>
              <div class="title flex">
                <span class="width15" style="line-height:20px">入池比例<span class="mustPass">*</span></span>
                <el-form-item class="item-clear" label="">
                  <el-input-number :min="0" :max="10000" :precision="0" v-model="formParams.other.pool_percent" controls-position="right" clearable placeholder="请输入入池比例"/>
                </el-form-item><span class="colorRed">(万分比)</span>
              </div>
              <div class="title flex">
                <span class="width15" style="line-height:20px">奖池上限比例<span class="mustPass">*</span></span>
                <el-form-item class="item-clear" label="">
                  <el-input-number :min="0" :max="10000" :precision="0" v-model="formParams.other.pool_up_limit" controls-position="right" clearable placeholder="请输入奖池上限比例"/>
                </el-form-item><span class="colorRed">(万分比)</span>
              </div>
              <div class="title flex">
                <span class="width15" style="line-height:20px">大奖上限比例<span class="mustPass">*</span></span>
                <el-form-item class="item-clear" label="">
                  <el-input-number :min="0" :max="10000" :precision="0" v-model="formParams.other.award_up_limit" controls-position="right" clearable placeholder="请输入大奖上限比例"/>
                </el-form-item><span class="colorRed">(万分比)</span>
              </div>
            </div>
            <!-- 展示奖励配置 -->
            <div class="item-clear" v-show="item.key=='show'" style="height:auto;padding:0;">
              <div class="border-item marginTB10" v-for="(second,two) in rewardData" :key="two">
                <div class="flex">
                  <el-form-item label="位置:" label-width="50px">
                    <el-input-number class="width120" :min="1" :max="10" disabled :precision="0" :controls="false" v-model="second.position" controls-position="right" clearable placeholder="请输入位置"/>
                  </el-form-item>
                  <el-form-item label="道具:" label-width="60px">
                    <el-select class="width180" v-model="second.item_id" placeholder="请选择道具类型" filterable >
                      <el-option :label="fourthly.label" :value="fourthly.value" v-for="(fourthly, four) in propDataArray" :key="four"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="多语言:" label-width="70px">
                    <el-input-number class="width120" :min="1" :max="999999999999" :precision="0" :controls="false" v-model="second.language_id" controls-position="right" clearable placeholder="请输入多语言ID"/>
                  </el-form-item>
                  <el-form-item label="权重:" label-width="60px">
                    <el-input-number class="width120" :min="1" :max="10000" :precision="0" v-model="second.weight" :controls="false" controls-position="right" clearable placeholder="请输入权重"/>
                  </el-form-item>
                </div>
                <!-- 奖励 -->
                <div class="title" style="height:auto;">
                  <div class="flex" v-for="(third,three) in second.propItem" :key="three">
                    <div class="btn-box-add" style="margin-top:0;">
                      <el-tooltip content="新增道具配置" v-show="second.itemIndex==three">
                        <el-button class="marginL10" size="mini" type="success" circle icon="el-icon-plus" @click="addReward(two)" />
                      </el-tooltip>
                    </div>
                    <el-form-item class="item-clear" label="奖励:" label-width="50px">
                      <el-select class="width180" v-model="third.itemType" placeholder="请选择道具类型" filterable >
                        <el-option :label="fourthly.label" :value="fourthly.value" v-for="(fourthly, four) in propDataArray" :key="four"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item class="item-clear" label="数值:" label-width="50px">
                      <el-input-number class="width180 marginR5" :min="0" :max="999999999999" :precision="0" :controls="false" v-model="third.num" controls-position="right" clearable placeholder="请输入道具奖励数值"/>
                    </el-form-item>
                    <div class="btn-box-delete" label-width="60px">
                      <el-tooltip content="删除道具配置" v-show="second.propItem.length != 1">
                        <el-button class="marginL10" size="mini" type="warning" circle icon="el-icon-minus" @click="deleteReward(two,three)" />
                      </el-tooltip>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 大奖励配置 -->
            <div class="item-clear" v-show="item.key=='prize'" style="height:auto;padding:0;">
              <div class="flex border-item marginTB10" v-for="(second,two) in rewardBigData" :key="two">
                <div class="btn-box-add">
                  <el-tooltip content="新增奖励配置" v-show="rewardBigIndex==two">
                    <el-button class="marginL10" size="mini" type="primary" circle icon="el-icon-plus" @click="addGibReward" />
                  </el-tooltip>
                </div>
                <div>
                  <div class="flex">
                    <el-form-item label="位置:" label-width="50px">
                      <el-input-number class="width120" :min="1" :max="10" disabled :precision="0" v-model="second.position" :controls="false" controls-position="right" clearable placeholder="请输入位置" style="width:90px;"/>
                    </el-form-item>
                    <el-form-item label="大奖比例:" label-width="90px">
                      <div class="flex">
                        <el-input-number class="width120" :min="1" :max="10000" :precision="0" :controls="false" v-model="second.start_show" controls-position="right" clearable placeholder="请输入额度" style="width:120px"/>
                        —
                        <el-input-number class="width120" :min="1" :max="10000" :precision="0" :controls="false" v-model="second.end_show" controls-position="right" clearable placeholder="请输入额度" style="width:120px"/>
                      </div>
                    </el-form-item>
                  </div>
                  <div class="flex">
                    <el-form-item label="是否上榜:" label-width="80px">
                      <el-radio-group size="small" v-model="second.is_show">
                        <el-radio-button :label="1">上榜</el-radio-button>
                        <el-radio-button :label="0">隐藏</el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否播放跑马灯:" label-width="120px">
                      <el-radio-group size="small" v-model="second.is_pao_ma_deng">
                        <el-radio-button :label="1">播放</el-radio-button>
                        <el-radio-button :label="0">隐藏</el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="跑马灯:" label-width="80px">
                      <el-select class="width200" v-model="second.pao_ma_deng_language_id" placeholder="跑马灯类型" filterable>
                        <el-option :label="third.label" :value="third.value" v-for="(third, three) in languageDataArray" :key="three"></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
                <div class="btn-box-delete" label-width="60px">
                  <el-tooltip content="删除配置" v-show="rewardBigData.length != 1">
                    <el-button class="marginL10" size="mini" type="danger" circle icon="el-icon-minus" @click="deleteGibReward(two)" />
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="handleConfirm('activityForm')">确 认</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  addActivity,
  editActivity
} from "@/api/activity";

import PageDetails from '../page-details.vue'
import GoodsDetails from '@/views/activityManage/commodity/page-details'
export default {
  components: {
    PageDetails,
    GoodsDetails
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
    propDataArray: {
      type: Array,
      default: function () {
        return this.$store.state.commonState.propDataArray
      }
    },
    languageDataArray: {
      type: Array,
      default: function () {
        return this.$store.state.commonState.languageDataArray
      }
    },
  },
  data () {
    return {
      isShow: false,
      itemData: [
        { label: '基础配置', key: 'basics' },
        { label: '奖励配置', key: 'show' },
        { label: '大奖配置', key: 'prize' },
      ],
      formParams:{
        other:{
          pool:0, //初始注入，奖池保底金额
          time_per_recharge:0, //抽奖充值，次数要求充值
          pool_percent:0, //入池比例
          pool_down_limit:0, //奖池下限
          pool_up_limit:0, //奖池上限比例
          award_up_limit:0, //大奖上限百分比
          awards:[],
          da_jiang_conf:[],
        }
      },
      rewardData:[
        {position:1,item_id:1,language_id:1,weight:1,propItem:[{itemType:1,num:0}],itemIndex:0},
        {position:2,item_id:1,language_id:1,weight:1,propItem:[{itemType:1,num:0}],itemIndex:0},
        {position:3,item_id:1,language_id:1,weight:1,propItem:[{itemType:1,num:0}],itemIndex:0},
        {position:4,item_id:1,language_id:1,weight:1,propItem:[{itemType:1,num:0}],itemIndex:0},
        {position:5,item_id:1,language_id:1,weight:1,propItem:[{itemType:1,num:0}],itemIndex:0},
        {position:6,item_id:1,language_id:1,weight:1,propItem:[{itemType:1,num:0}],itemIndex:0},
        {position:7,item_id:1,language_id:1,weight:1,propItem:[{itemType:1,num:0}],itemIndex:0},
        {position:8,item_id:1,language_id:1,weight:1,propItem:[{itemType:1,num:0}],itemIndex:0},
      ],
      rewardBigData:[
        {position:8,start_show:0,end_show:0,is_show:1,is_pao_ma_deng:1,pao_ma_deng_language_id:''}
      ],
      rewardBigIndex:0,
      ruleForm: {},
    }
  },
  computed: {},
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        that.formParams = JSON.parse(JSON.stringify(that.data))
        that.rewardData=that.formParams.parameter.awards
        if(that.formParams.parameter.da_jiang_conf){
          that.formParams.parameter.da_jiang_conf.map(item=>{
            if(!item.pao_ma_deng_language_id){
              item.pao_ma_deng_language_id=''
            }
          })
        }
        that.formParams.other = that.formParams.parameter
        that.rewardData = that.formParams.parameter.awards
        that.rewardBigData = that.formParams.parameter.da_jiang_conf
        that.rewardBigIndex = that.rewardBigData.length-1
      } else {
        that.formParams = {
          other:{
            pool:0, //初始注入，奖池保底金额
            time_per_recharge:0, //抽奖充值，次数要求充值
            pool_percent:0, //入池比例
            pool_down_limit:0, //奖池下限
            pool_up_limit:0, //奖池上限比例
            award_up_limit:0, //大奖上限百分比
            awards:[],
            da_jiang_conf:[],
          }
        }
      }
    }
  },
  mounted () { },
  methods: {
    // 确认
    handleConfirm (formvalue) {
      if(!this.$refs.baseForm.handleConfirm()){
        return false
      }
      let that = this, parameter = JSON.parse(JSON.stringify(that.formParams.other)),
      params = JSON.parse(JSON.stringify(this.$refs.baseForm.handleConfirm()));
      if(!parameter.pool){
        return that.$message.error('请输入奖池保底金额')
      }
      if(!parameter.time_per_recharge){
        return that.$message.error('请输入次数要求充值')
      }
      if(!parameter.pool_percent){
        return that.$message.error('请输入奖励入池比例')
      }
      if(!parameter.pool_up_limit){
        return that.$message.error('请输入奖池上限比例')
      }
      if(!parameter.award_up_limit){
        return that.$message.error('请输入大奖上限百分比')
      }
      params.activity_type = 16
      params.other={}
      parameter.awards=that.arrNumWan(JSON.parse(JSON.stringify(that.rewardData)))
      that.rewardBigData.map(item=>{
        if(!item.pao_ma_deng_language_id){
          item.pao_ma_deng_language_id=0
        }
      })
      parameter.da_jiang_conf=that.rewardBigData
      // 金额乘10000
      parameter.pool_down_limit=that.$public.mathNumberMultiply(parameter.pool_down_limit,10000)
      parameter.pool=that.$public.mathNumberMultiply(parameter.pool,10000)
      parameter.time_per_recharge=that.$public.mathNumberMultiply(parameter.time_per_recharge,10000)
      params.other=JSON.stringify(parameter)
      that.$refs[formvalue].validate((valid) => {
        if (valid) {
          if(params.id){
            editActivity(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          }else{
            addActivity(params).then((res)=> {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          }
        }
      })
    },
    // 新增大奖
    addGibReward(){
      this.rewardBigIndex++
      this.rewardBigData.push({position:8,start_show:0,end_show:0,is_show:0,is_pao_ma_deng:0,pao_ma_deng_language_id:''})
    },
    // 删除大奖
    deleteGibReward(index){
      this.rewardBigIndex--
      this.rewardBigData.splice(index,1,)
    },
    // 新增道具
    addReward (index) {
      this.rewardData[index].itemIndex++
      this.rewardData[index].propItem.push({
        itemType:1,num:0
      })
    },
    // 删除道具
    deleteReward (index,two) {
      this.rewardData[index].itemIndex--
      this.rewardData[index].propItem.splice(two,1,)
    },
    // 道具*10000
    arrNumWan(arr){
      arr.forEach(item=>{
        item.propItem.forEach(second=>{
          second.num=second.num*10000
        })
      })
      return arr
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">
.btn-box-add{
  width: 50px;
  text-align: center;
  margin-top: -20px;
  margin-left: -10px;
  .el-button{
    height: 28px;
  }
}
.btn-box-delete{
  width: 50px;
  text-align: center;
  .el-button{
    height: 28px;
  }
}
</style>
